<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        position: relative;
        top: 800px;
        right: 450px;
        transition: all .4s;
        transform-style: preserve-3d;
    }
    
    .box:hover {
        transform: rotateY(180deg);
    }
    
    .front,
    .back {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        font-size: 30px;
        text-align: center;
        line-height: 300px;
    }
    
    .front {
        z-index: 1;
    }
    
    .back {
        transform: rotateY(180deg);
    }
    
    body {
        background-color: black;
        min-width: 100%;
        min-height: 100%;
    }
    
    .bg {
        background-color: black;
        margin: 0 auto;
    }
    
    .shipin {
        position: absolute;
        min-width: 100%;
        min-height: 100%;
    }
    
    h2 {
        color: white;
        display: inline-block;
        position: absolute;
        left: 500px;
        top: 800px;
    }
    
    h3 {
        color: white;
    }
    
    .zzz,
    .fff {
        border-radius: 120px;
    }
    
    .jieshao h4 {
        position: absolute;
        left: 560px;
        top: 860px;
    }
    
    .jieshao p {
        color: white;
        display: inline-block;
        position: relative;
        left: 680px;
        top: 880px;
    }
    
    .zi p {
        color: white;
    }
    
    .jieshao a {
        color: rgb(240, 226, 226);
        position: absolute;
        font-size: 22px;
    }
    
    .r {
        position: relative;
        top: 945px;
        left: 120px;
    }
    
    .w {
        position: relative;
        top: 965px;
        left: 120px;
    }
    
    .s {
        position: absolute;
        top: 1130px;
        right: 180px;
    }
    
    .zi {
        width: 350px;
        height: 280px;
        background-color: #656075;
        text-align: center;
        position: absolute;
        top: 1230px;
        right: 550px;
    }
    
    .m {
        position: absolute;
        top: 1600px;
        right: 300px;
    }
    
    .err {
        position: relative;
        left: 1120px;
        bottom: 155px;
    }
    
    .errr {
        position: relative;
        left: 75px;
        bottom: 2px;
    }
    
    .errrr {
        position: relative;
        left: 65px;
        bottom: 2px;
    }
    
    .errrrr {
        position: relative;
        left: 55px;
        bottom: 2px;
    }
    
    .l {
        position: relative;
        top: 1250px;
        left: 245px;
        transform: all 5s;
    }
    
    .l :hover {
        transform: scale(1.1);
    }
    
    .san,
    .liu {
        border-left: 20px solid;
    }
    
    .x,
    .c,
    .b,
    .n,
    .xx,
    .cc,
    .bb,
    .nn {
        border-left: 70px solid;
    }
    
    .v,
    .b,
    .n,
    .zz,
    .xx,
    .cc,
    .vv,
    .bb,
    .nn {
        border-top: 70px solid;
    }
    
    .ma {
        position: relative;
        top: 1270px;
        left: 650px;
    }
    
    .vx,
    .qq {
        transform: scale(1);
    }
    
    .qq {
        border-left: 20px solid;
    }
    
    h4 {
        color: white;
        position: relative;
        left: 50px;
        bottom: 200px;
    }
    
    .mdw {
        position: absolute;
        top: 20px;
        left: 100px;
        text-decoration: none;
    }
    
    .mdq {
        position: absolute;
        top: 20px;
        left: 200px;
        text-decoration: none;
    }
    
    .mde {
        position: absolute;
        top: 20px;
        left: 300px;
        text-decoration: none;
    }
</style>

<body>
    <div>
        <video autoplay muted loop class="shipin" src="17.mp4"></video>
    </div>

    <div class="box">
        <div class="front">
            <img class="zzz" src="1.jpg" alt="" width="240px" height="240px">
        </div>
        <div class="back">
            <img class="fff" src="4.jpg" alt="" width="240px" height="240px">
        </div>
    </div>

    <div class="jieshao">
        <h2>This is my brief introduction</h2>
        <a class="mdw" href="#one">个人介绍</a>
        <a class="mdq" href="#two">生活碎片</a>
        <a class="mde" href="#three">联系方式</a>
        <h4 id="one">个人介绍</h4>
        <p>我的名字叫谢玟莉,请注意我的玟，遇到过很多人都会打错；
            <br>我也很喜欢豹纹，所以会有人叫我豹纹莉
            <br>这是一个简单的介绍
            <br>我是天秤座
            <br>喜欢旅游，去吃好吃的美食，买喜欢的东西，未来想尝试一些极限运动
            <br>如果你也喜欢就交个朋友冲冲冲

        </p>
    </div>

    <div class="r">
        <img class="wu" src="5.jpg" width="200px" height="200px">
        <img class="san" src="3.jpg" width="200px" height="200px">
    </div>

    <div class="w">
        <img class="qi" src="12.jpg" width="200px" height="200px">
        <img class="liu" src="11.jpg" width="200px" height="200px">
    </div>

    <div>
        <img class="s" src="14.jpg" width="420px" height="420px">
    </div>

    <div class="zi">
        <h3 id="two">生活碎片</h3>
        <p>喜欢好看的东西，并且把它们记录下来，希望你看了也会喜欢


        </p>
    </div>

    <div class="m">
        <img class="errrrr" src="2.jpg" width="340px" height="150px">
        <img class="errrr" src="2.jpg" width="340px" height="150px">
        <img class="errr" src="2.jpg" width="340px" height="150px">
        <img class="err" src="2.jpg" width="340px" height="150px">
    </div>

    <div class="l">
        <img class="z" src="20.jpg" width="320px" height="320px">
        <img class="x" src="26.jpg" width="320px" height="320px">
        <img class="c" src="27.jpg" width="320px" height="320px">
        <div>
            <img class="v" src="31.jpg" width="320px" height="320px">
            <img class="b" src="18.jpg" width="320px" height="320px">
            <img class="n" src="8.jpg" width="300px" height="330px">
        </div>
        <div>
            <img class="zz" src="29.jpg" width="310px" height="320px">
            <img class="xx" src="7.jpg" width="310px" height="320px">
            <img class="cc" src="34.jpg" width="310px" height="320px">
        </div>
        <div>
            <img class="vv" src="32.jpg" width="310px" height="320px">
            <img class="bb" src="33.jpg" width="310px" height="320px">
            <img class="nn" src="38.jpg" width="310px" height="320px">
        </div>


    </div>

    <div class="ma">
        <h3 id="three">联系方式</h3>
        <img class="vx" src="15.jpg" width="50px" height="50px">
        <img class="qq" src="16.jpg" width="50px" height="50px">
    </div>

    </div>


</body>

</html>